<div class="modal-header alert alert-primary alert-no-bottom">
  <h5 class="modal-title">Select the new deadline for extension</h5>
  <button type="button" class="btn-close" (click)="activeModal.dismiss()"></button>
</div>
<div class="modal-body">
  Extending the feedback session for <b>{{ numStudents }}</b> student(s) and <b>{{ numInstructors }}</b> instructor(s):
</div>

<div class="container ms-1">

  <div class="row ps-3">
    <label class="me-2"><input id="extend-deadline-by" type="radio" name="optradio" [value]="RadioOptions.EXTEND_BY" [(ngModel)]="radioOption">
      Extend deadline by
    </label>
    <label><input id="extend-deadline-to" type="radio" name="optradio" [(ngModel)]="radioOption" [value]="RadioOptions.EXTEND_TO">
      Extend deadline to
    </label>
  </div>

  <div *ngIf="isRadioExtendBy()">
    <small>Extend the feedback session by:</small>
    <div id="submission-start-date">
      <div class="input-group w-75">
        <select id="extend-by-dropdown" class="form-control form-select" [(ngModel)]="extendByDeadlineKey">
          <option *ngFor="let deadlineOption of extendByDeadlineOptions | keyvalue: sortMapByOriginalOrder"
            [value]="deadlineOption.key">
            {{ deadlineOption.key }}
            <div *ngIf="deadlineOption.key !== 'Customize'">
              ({{ extendAndFormatEndTimeBy(deadlineOption.value, 0) }})
            </div>
          </option>
        </select>
      </div>
    </div>
  </div>

  <div *ngIf="isRadioExtendTo()">
    <small>The new deadline of the feedback session will be:</small>
    <div id="submission-start-date">
      <div class="input-group">
        <tm-datepicker
          id="submission-end-date"
          [date]="extendToDatePicker"
          (dateChangeCallback)="onChangeDateTime($event, DateTime.DATE)"
          [minDate]="getDateFormat(feedbackSessionEndingTimestamp)">
        </tm-datepicker>
        <div class="col-md-5">
          <tm-timepicker id="submission-end-time" [time]="extendToTimePicker" (timeChange)="onChangeDateTime($event, DateTime.TIME)">
          </tm-timepicker>
        </div>
      </div>
    </div>
  </div>

  <div *ngIf="isCustomize()">
    <form class="container">
      <div class="row">
        <div class="col-sm ps-0">
          <small>Hours</small>
          <input class="form-control" id="form-hours" name="form-hours" type="number" placeholder="Hours"
            [(ngModel)]="extendByDatePicker.hours">
        </div>
        <div class="col-sm">
          <small>Days</small>
          <input class="form-control" id="form-days" name="form-days" type="number" placeholder="Days"
            [(ngModel)]="extendByDatePicker.days">
        </div>
      </div>
    </form>
    <br>
    <p *ngIf="!isCustomizeDateTimeIntegers()" class="text-danger m-0"><span class="fa fa-times"></span> Please input only integers into both blanks.</p>
    <p *ngIf="!isDateSelectedLaterThanCurrentEndingTimestamp()" class="text-danger m-0"><span class="fa fa-times"></span> Please input a date later than the current session ending date.</p>
    <p *ngIf="!isCustomizeBeforeMaxDate()" class="text-danger m-0"><span class="fa fa-times"></span> Please input a valid date.</p>
    <p class="mb-0">
      The new extended deadline will be: {{ extendAndFormatEndTimeBy(extendByDatePicker.hours, extendByDatePicker.days) }}
    </p>
  </div>

  <br>
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-light" (click)="activeModal.dismiss()">No, cancel the Operation</button>
  <button type="button" class="btn btn-success modal-btn-ok" (click)="onConfirm()" [disabled]="!isValidForm()">
    Save Changes</button>
</div>
